<template>
  <!--表格  -->
  <el-table :data="tableData.tableList" style="width: 100%" size="default" current-row-key="number">
    <el-table-column type="index" :index="indexMethod" />
    <el-table-column label="表名" prop="tableName"/>
    <el-table-column label="表注释" prop="tableComment"/>
    <el-table-column label="创建时间" prop="createTime"/>
    <el-table-column align="right">
      <template #header>
        <el-input v-model="search" size="default" placeholder="这是废物，我就没做"/>
      </template>
      <template #default="scope">
        <el-button size="default" @click="handleEdit(scope.$index, scope.row)"
        >Look
        </el-button
        >
        <el-button
            size="default"
            type="primary"
            @click="handleDelete(scope.$index, scope.row)"
        >Generated
        </el-button
        >
      </template>
    </el-table-column>
  </el-table>
  <!--分页-->
  <div class="example-pagination-block">
    <el-pagination layout="prev, pager, next" v-model:current-page="tableData.page"
                   :total="tableData.total" :hide-on-single-page="true" />
  </div>
  <!--弹窗-->
  <el-drawer
      v-model="table"
      direction="rtl"
      size="85%"
  >
    <el-table :data="tableData.ColumnList">
      <el-table-column property="columnName" label="字段名" />
      <el-table-column property="dataType" label="字段类型" />
      <el-table-column property="columnComment" label="注释" />
    </el-table>


  </el-drawer>
</template>

<script lang="ts" setup>
import { ElLoading,ElDrawer, ElMessage } from 'element-plus'
import {computed, onMounted, reactive, ref, watch} from 'vue'
import {GetTableList,GetTableColumn,Generator} from '../service/api'
interface TableList {
  tableName: string
  tableComment: String
  createTime: String
}
interface TableColumn {
  columnName: String
  dataType: String
  columnComment: String
}
const generator = reactive({
  url: "",
  modelName:"",
  tablePrefix:"",
  author:"",
  idType:"",
  tableName:""
})
const search = ref('')
const table = ref(false)
const tableData = reactive({
  tableList: [],
  total: 0,
  page: 1,
  ColumnList:[]
})

onMounted(() => {
  tableList();
})
watch(()=>tableData.page,(page)=>{
  tableList();
})

/**
 * 对选项操作
 * @param index
 * @param row
 */
const handleEdit = (index: number, row: TableList) => {
  table.value = true;
  GetTableColumn(row.tableName)
      .then(res=>{
        tableData.ColumnList = res.data.data;
            console.log(tableData.ColumnList)
      }).catch(err=>{
    console.log(err)
  })
}
const indexMethod = (index: number) => {
  return index++;
}
/**
 * 生成代码
 * @param index
 * @param row
 */
const handleDelete = (index: number, row: TableList) => {
  console.log("xing==", row.tableName)
  generator.tableName = row.tableName;
  Generator(generator).then(res=> {
    if (res.data.code==200){
      ElMessage.success("生成成功")
    }else {
      ElMessage.error("生成失败")
    }
  }).catch(err=> {
    console.log(err)
    ElMessage.error("生成失败")
  })

}
const tableList = () => {
  const loadingInstance = ElLoading.service()
  setTimeout(loadingInstance.close,300)
  GetTableList({
    page: (tableData.page-1)*9,
  }).then(res => {
    tableData.tableList=res.data.data.list;
    tableData.total = res.data.data.total;
  }).catch(err => {
    console.log(err)
  })
}

const drawerRef = ref<InstanceType<typeof ElDrawer>>()
const onClick = () => {
  drawerRef.value!.close()
}

</script>
<style scoped>
.example-pagination-block + .example-pagination-block {
  margin-top: 10px;
}
.example-pagination-block{
  position: absolute;
  bottom: 60px;
  width: 85%;
  display: flex;
  justify-content: center;
}
</style>
